<!--
 * @Author: canlong.shen
 * @Date: 2021-10-21 16:57:26
 * @LastEditors: your name
 * @LastEditTime: 2021-10-26 15:18:42
 * @Description: file content
-->
<html>
  <head>
    <title>课09.Vuex五大核心——Modul</title>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- vuex -->
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const aMoudle = {
        namespaced: true,
        state: {
          aCount: 1,
        },
        getters: {
          aGetter(state, getters, rootState) {
            console.log("aGetter")
            return "aGetter" + state.aCount + rootState.count
          },
        },
        actions: {
          aAction({ commit, state, rootState }) {
            console.log("aAction")
          },
        },
        mutations: {
          incrementAModule(state) {
            state.aCount++
            console.log(state.aCount)
          },
        },
      }

      const bMoudle = {
        state: {
          bCount: 2,
        },
        getters: {},
        actions: {},
        mutations: {},
      }

      const store = new Vuex.Store({
        modules: {
          a: aMoudle,
          b: bMoudle,
        },
        state: {
          count: 10,
        },
        mutations: {
          incrementRoot(state) {
            state.count++
          },
        },
      })

      const app = new Vue({
        el: "#app",
        store,
        methods: {
          test() {
            this.$store.dispatch('a/aAction')
            this.$store.getters["a/aGetter"]
            this.$store.commit("a/incrementAModule")
          },
        },
        template: `
               <div>
                {{$store.getters.aGetter}}
                  <button @click="test">点击测试</button>
                </div>
            `,
      })
    </script>
  </body>
</html>
